<template>
  <el-form ref="ruleFormRef" :model="formData" v-bind="$attrs">
    <el-row v-bind="formRow" v-for="(field, index) in
      fields" :key="index">
      <el-col v-bind="{ ...formCol, ...field.formCol }">
        <el-form-item v-bind="field" :prop="field.label">
          <component :is="getComponentName(field.type)" :modelValue="formData[field.label]" :options="field.options"
            :model="field.model" :multiple="field.multiple" :disabled="field.disabled" :unit="field.unit"
            :pickerOptions="field.pickerOptions" :placeholder="field.placeholder"
            @update:modelValue="(value: any) => handleInput(field.label, value)"
            @input="(value: any) => handleInput(field.label, value)" />
          <!-- <div v-if="field.tips">{{ field.tips }}</div> -->
        </el-form-item>
      </el-col>
    </el-row>

    <el-form-item>
      <slot name="submit">
        <div :style="{ width: '100%' }">
          <el-button v-bind="submitProps" @click="submitForm">提交</el-button>
        </div>
      </slot>
    </el-form-item>
  </el-form>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import Radio from "./components/Radio.vue";
import Customer from "./components/Customer.vue";
import Checkbox from "./components/Checkbox.vue";
import Switch from "./components/Switch.vue";
import TimePicker from "./components/TimePicker.vue";
import DatePicker from "./components/DatePicker.vue";
import Input from "./components/Input.vue";
import Select from "./components/Select.vue";
import { FormInstance, type RowProps, type ColProps } from "element-plus";

// 定义 Field 类型
type Field = {
  type: string;
  label: string;
  value: any;
  options?: any[];
  model?: any;
  multiple?: boolean;
  disabled?: boolean;
  unit?: string;
  pickerOptions?: any;
  placeholder?: string;
  formCol?: Object;
  // tips?: string;
};


export default defineComponent({
  components: {
    Radio,
    Customer,
    Checkbox,
    Switch,
    TimePicker,
    DatePicker,
    Input,
    Select,
  },
  props: {
    fields: {
      type: Array as () => Field[],
      default: () => [],
    },
    data: {
      type: Object,
      default: () => ({}),
    },
    formRow: {
      type: Object as () => RowProps,
      default: () => ({
        gutter: 24,
        justify: 'start'
      }),
    },
    formCol: {
      type: Object as () => ColProps,
      default: () => ({
        span: 24,
      }),
    },
    submitProps: {
      type: Object,
      default: () => ({}),
    },
  },
  setup(_props, { emit }) {
    const ruleFormRef = ref<FormInstance>();
    const formData = ref<{ [key: string]: any }>(_props.data);


    const getComponentName = (type: string) => {
      switch (type) {
        case "radio":
          return "Radio";
        case "customer":
          return "Customer";
        case "checkbox":
          return "Checkbox";
        case "switch":
          return "Switch";
        case "timePicker":
          return "TimePicker";
        case "datePicker":
          return "DatePicker";
        case "input":
          return "Input";
        case "select":
          return "Select";
        default:
          throw new Error("未知的组件类型");
      }
    };

    const handleInput = (name: string, value: any) => {
      formData.value = {
        ...formData.value,
        [name]: value,
      };
    };

    const submitForm = async () => {
      // console.log("提交表单数据:", _props.ruleForm);
      if (!ruleFormRef.value) return;
      await ruleFormRef.value.validate((valid, fields) => {
        if (valid) {
          emit('submitCallback', true);
        } else {
          emit('submitCallback', fields);
        }
      })
    };

    return {
      formData,
      getComponentName,
      handleInput,
      submitForm,
      ruleFormRef
    };
  },
});
</script>
